/*
 * @Author: your name
 * @Date: 2021-04-27 09:35:58
 * @LastEditTime: 2021-04-30 08:11:36
 * @LastEditors: 邢
 * @Description: In User Settings Edit
 * @FilePath: \ribao\daily-1807a-6\项目代码\project2\wipi\src\component\File\viewerImage.tsx
 */
import { useEffect, useRef } from 'react';
import Viewer from 'viewerjs'
import { observer } from 'mobx-react-lite';

const ViewerImage: React.FC = props=>{
    const ref = useRef<HTMLDivElement>(null);
    useEffect(()=>{
        const viewer = new Viewer(ref.current!)
        const ob = new MutationObserver(()=>{
            viewer.update();
        })
        ob.observe(ref.current!, {
            subtree: true,
            childList: true
        })
        return ()=>{
            viewer.destroy();
            ob.disconnect();
        }
    }, []);

    return <div ref={ref}>{props.children}</div>
}

export default observer(ViewerImage);